<template>
    <div>
        <TalentManage ref="talentRef" />
        <div class="com_box">
            <div class="time_head flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <div class="flexbox flexcenter">
                        <div class="sch_tab flexbox flexcenter" :class="{'active':type==2}">
                            <img src="../../assets/img/car_b1.svg" alt="" class="is_active" v-if="type==2">
                            <img src="../../assets/img/car_a1.svg" alt="" class="no_active" v-else>
                            抖音
                        </div>
                        <div class="sch_tab flexbox flexcenter" :class="{'active':type==1}">
                            <img src="../../assets/img/car_b2.svg" alt="" class="is_active" v-if="type==1">
                            <img src="../../assets/img/car_a2.svg" alt="" class="no_active" v-else>
                            天猫
                        </div>
                        <div class="sch_tab flexbox flexcenter" :class="{'active':type==3}">
                            <img src="../../assets/img/car_b3.svg" alt="" class="is_active" v-if="type==3">
                            <img src="../../assets/img/car_a3.svg" alt="" class="no_active" v-else>
                            私域
                        </div>
                    </div>
                </div>
                <div class="flexbox flexcenter">
                    <div class="flexbox flexcenter model_box">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.683 9.1665V17.4998H3.34961V9.1665" stroke="#FF5740" stroke-width="0.416667" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M2.43428 5.74025C1.79696 7.39071 3.02626 9.16667 4.79548 9.16667C6.17619 9.16667 7.30315 8.04737 7.30315 6.66667C7.30315 8.04737 8.42244 9.16667 9.80315 9.16667H10.2275C11.6082 9.16667 12.7275 8.04737 12.7275 6.66667C12.7275 8.04737 13.8549 9.16667 15.2356 9.16667C17.0058 9.16667 18.2362 7.38967 17.5984 5.73846L16.3474 2.5H3.68549L2.43428 5.74025Z" fill="#FF5740" stroke="#FF5740" stroke-width="0.416667" stroke-linejoin="round" />
                        </svg>
                        明趣玩具旗舰店
                    </div>
                    <el-button plain size="small" @click="talentManage">
                        <div class="flexbox flexcenter flexjust">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#616C85" class="stroke_svg btn_svg" xmlns="http://www.w3.org/2000/svg">
                                <path d="M7.11933 6.38021C5.15647 6.28551 3.79207 6.98535 3.02613 8.47971C1.87723 10.7212 2.82675 14.3891 6.6596 14.3891C10.4925 14.3891 10.6033 10.6854 10.6033 10.2974C10.6033 10.0387 10.6033 8.59238 10.6033 5.95844C11.4231 6.47768 12.1143 6.79025 12.6769 6.89615C13.2395 7.00201 13.5972 7.04895 13.7499 7.03691V4.87834C13.2295 4.81561 12.7795 4.69601 12.3999 4.51961C11.8304 4.25501 10.7012 3.52061 10.7012 2.44427C10.702 2.44953 10.702 2.17189 10.7012 1.61133H8.32857C8.3215 6.88334 8.3215 9.77868 8.32857 10.2974C8.33917 11.0754 7.7356 12.1637 6.51183 12.1637C5.28807 12.1637 4.6845 11.0763 4.6845 10.3749C4.6845 9.94548 4.832 9.32308 5.4417 8.86218C5.80327 8.58885 6.3051 8.47971 7.11933 8.47971C7.11933 8.22785 7.11933 7.52801 7.11933 6.38021Z" stroke="inherit" stroke-linejoin="round" />
                            </svg>
                            达人管理
                        </div>
                    </el-button>
                    <el-date-picker :picker-options="pickerOptions" style="width:240px;margin-left:12px" @change="selectDate" class="bd_2" size="small" value-format="yyyyMMdd" v-model="date" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="finace_count">
                <FinaceCount @selectCountType="selectCountType" @getCountData="getCountData" :date="date" :shopInfo="shop_info" :countData="countData" :countType="countType" v-loading="fi_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
                <CarTable @getCarData="getCarData" :carList="carList" :carInfo="carInfo" :carData="carData" v-loading="ca_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
            </div>
        </div>

        <GoodsTable @getGoodsData="getGoodsData" :goodsList="goodsList" :goodsInfo="goodsInfo" v-loading="go_loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
    </div>
</template>

<script>
import CarTable from "./CarTable";
import FinaceCount from "./FinaceCount";
import GoodsTable from "./GoodsTable";
import TalentManage from "./TalentManage";
export default {
    name: "",
    data() {
        return {
            fi_loading: false,
            ca_loading: false,
            go_loading: false,
            shop_info: {},
            date: this.getTimeFn(),
            countType: 3,
            type: 2,
            goodsInfo: {
                page: 1,
                limit: 5,
                order_types: "",
                order_field: "",
                total: 0,
            },
            carInfo: {
                page: 1,
                limit: 10,
                order_types: "",
                order_field: "",
                transaction_type: 1,
                content_type: 1,
                total: 0,
            },
            goodsList: [],
            countData: {},
            carList: [],
            carData: {},
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近1天",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 1
                            );
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近7天",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近30天",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
        };
    },
    created() {
        this.getModelList();
    },
    beforeDestroy() {},
    methods: {
        // 时间选择
        selectDate() {
            this.goodsInfo.page = 1;
            this.carInfo.page = 1;
            this.getCountData();
            this.getGoodsData();
            this.getCarData();
        },

        getTimeFn() {
            const that = this;
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 1);
            return [that.formatDate(date), that.formatDate(date)];
        },

        formatDate(date) {
            var myyear = date.getFullYear();
            var mymonth = date.getMonth() + 1;
            var myweekday = date.getDate();

            if (mymonth < 10) {
                mymonth = "0" + mymonth;
            }
            if (myweekday < 10) {
                myweekday = "0" + myweekday;
            }
            return myyear + mymonth + myweekday;
        },

        // 达人管理
        talentManage(){
            this.$refs.talentRef.dialogVisible = true
            this.$refs.talentRef.shop_id = this.shop_info.shop_id
            this.$refs.talentRef.getUserList()
        },

        //获取模板列表
        async getModelList() {
            const { data: res } = await this.$http.post(
                "/projectfinance/Revenue/shopList"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                if (res.data.list.length > 0) {
                    this.shop_info = res.data.list[0];
                    this.getCountData();
                    this.getGoodsData();
                    this.getCarData();
                }
            }
        },

        //获取汇总
        async getCountData() {
            let queryInfo = {
                types: this.countType,
                shop_id: this.shop_info.shop_id,
                date: this.date,
            };
            this.fi_loading = true;
            const { data: res } = await this.$http.post(
                "/projectfinance/Revenue/gather",
                queryInfo
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                this.fi_loading = false;
                return;
            } else {
                this.fi_loading = false;
                this.countData = res.data;
            }
        },

        selectCountType(type) {
            this.countType = type;
            this.getCountData();
        },

        //获取载体构成数据
        async getCarData() {
            let queryInfo = {
                shop_id: this.shop_info.shop_id,
                date: this.date,
                page: this.carInfo.page,
                limit: this.carInfo.limit,
                order_types: this.carInfo.order_types,
                order_field: this.carInfo.order_field,
                transaction_type: this.carInfo.transaction_type,
                content_type: this.carInfo.content_type,
            };
            this.carList = [];
            this.ca_loading = true;
            const { data: res } = await this.$http.post(
                "/projectfinance/Revenue/carrier",
                queryInfo
            );
            if (res.code !== 200) {
                this.ca_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.ca_loading = false;
                this.carList = res.data.list;
                this.carData = res.data.overview;
                this.carInfo.total = res.data.count;
            }
        },

        //获取商品
        async getGoodsData() {
            let queryInfo = {
                shop_id: this.shop_info.shop_id,
                date: this.date,
                page: this.goodsInfo.page,
                order_types: this.goodsInfo.order_types,
                order_field: this.goodsInfo.order_field,
                limit: this.goodsInfo.limit,
            };
            this.go_loading = true;
            const { data: res } = await this.$http.post(
                "/projectfinance/Revenue/product",
                queryInfo
            );
            if (res.code !== 200) {
                this.go_loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.go_loading = false;
                this.goodsList = res.data.list;
                this.goodsInfo.total = res.data.count;
            }
        },

        sesstionData() {
            let sessionForm = {
                modelCheck: this.modelCheck,
                queryInfo: this.queryInfo,
            };
            window.sessionStorage.setItem(
                "financeQuery",
                JSON.stringify(sessionForm)
            );
        },

        // 每页显示多少条数据
        handleSizeChange(val) {
            this.queryInfo.limit = val;
            this.getDuringList(1);
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.setpage = val;
            this.getDuringList(val);
        },
    },
    components: {
        FinaceCount,
        GoodsTable,
        CarTable,
        TalentManage,
    },
};
</script>


<style scoped>
.time_head {
    height: 72px;
    border-bottom: 1px solid #ebebeb;
    padding: 0 20px;
}
.sch_tab {
    height: 71px;
    font-size: 16px;
    color: #616c85;
    line-height: 71px;
    margin-right: 20px;
    position: relative;
    cursor: pointer;
}
.sch_tab img {
    margin-right: 6px;
}
.sch_tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #4475ff;
    transition: all 0.3s;
    transform: scaleX(0);
}
.sch_tab.active {
    color: #4475ff;
}
.sch_tab.active::after {
    transform: scaleX(1);
}
.finace_count {
    padding: 16px;
}
.model_box {
    margin-right: 12px;
    font-size: 14px;
    color: #616c85;
}
.model_box svg {
    margin-right: 5px;
}
</style>

<style>
.bd_2.el-input__inner {
    border-radius: 2px;
}
.carrier_table.el-table th {
    background: #fff;
    border-bottom: 1px solid #f1f2f3 !important;
}
</style>

